<template>
    <div class="tech-swipe-membercard">
        <swiper id="memberCardSwiper" class="tech-swipe" :loop="false" :show-indicators="true" @slideChange="change">
            <swiperSlide class="swipe-member-item" v-for="(item, i) in memberCardList" :key="i" :data-id="item.gradeId">
                <MemberCardNew
                    class="swipe-member-card"
                    v-if="item"
                    :name="item.gradeName || '会员卡'"
                    :balance="item.balance"
                    :discount="item.disCount"
                    :cardId="item.gradeId"
                    :integral="item.integral"
                    :haveIntegral="item.grade.integralEarnFlag"
                    :isHaveRechargeBtn="isHaveRechargeBtn(item)"
                    :isShopCard="item.businessTypes ? item.businessTypes.indexOf('emall') > -1 : false"
                    @click="click"
                    @recharge="rechargeAction"
                />
            </swiperSlide>
        </swiper>
    </div>
</template>

<script>
import { mapState } from 'vuex';
import { swiper, swiperSlide } from 'vue-awesome-swiper';
import MemberCardNew from './MemberCardNew';
export default {
    name: 'MemberCardSwipe',
    components: {
        swiper,
        swiperSlide,
        MemberCardNew,
    },
    props: {
        memberCardList: {
            type: Array,
            default() {
                return [];
            },
        }
    },
    computed: {
        ...mapState({
            memberCardRechargeState: state => state.member.memberCardRechargeState, // 会员卡能否充值状态
        }),
        isHaveRechargeBtn() {
            return item => {
                const temp = this.memberCardRechargeState.filter(i => i.group_id == item.groupId)[0];
                return temp ? temp.allow_recharge : false;
            };
        },
    },
    methods: {
        redirect(res) {
            const { url } = res;
            url && this.$router.push(url);
        },
        click(cardId) {
            this.$emit('click', cardId);
        },
        change(index) {
            const that = this;
            setTimeout(() => {
                const id = document.querySelector('#memberCardSwiper').querySelector('.swiper-slide-active').getAttribute('data-id');
                const cardInfo = (that.$props.memberCardList || []).filter(item => `${item.gradeId}` === `${id}`)[0];
                this.$emit('change', cardInfo);
            }, 300);
        },
        rechargeAction() {
            this.$emit('recharge');
        },
    },
};
</script>

<style lang="less">
.tech-swipe-membercard{
    background-color: @white;
    .tech-swipe {
        width: 100%;
        // border-radius: @border-radius;
        .swipe-member-item {
            // background-color: transparent;
            width: 100%;
            height: 100%;
            .swipe-member-card {
                .m-h(@gap-md);
            }
            &.swiper-slide-prev {
                right: -18px;
                .tech-member-card {
                    transform: scale(0.9);
                }
            }
            &.swiper-slide-next {
                left: -18px;
                .tech-member-card {
                    transform: scale(0.9);
                }
            }
        }
    }
    .van-swipe__indicator {
        display: none;
        background-color: rgba(141, 102, 39, .2);
    }
    .van-swipe__indicator--active {
        background-color: rgba(141, 102, 39, .6);
    }
}
</style>

